<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <!--1. 引入jquery-->
    <script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
    <!--2. 引入bootstrap的css库-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--3. 引入bootstrap的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
        .panel-title{
            padding:5px 0px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    学生信息列表
                </h3>
            </div>
            <table class="table table-hover table-striped">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <tr th:each="stud : ${students}">
                    <td>[[${stud.sid}]]</td>
                    <td th:text="${stud.sname}"></td>
                    <td th:text="${stud.sex}"></td>
                    <td th:text="${stud.age}"></td>
                    <td th:text="${stud.addr}"></td>
                    <td th:text="${stud.cid}"></td>
                    <td>
                        <a href="#" class="btn btn-success btn-sm">修改</a>
                        <a th:href="'/student/delete?sid=' + ${stud.sid}" class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </table>
            <div class="panel-footer text-right">
                <a href="javascript:void(0)" class="btn btn-success btn-sm" onclick="showEditStudentUI()">添加学生</a>
                SpringBoot + MybatisPlus + Thymeleaf整合开发.
            </div>
        </div>

        <%--编辑学生（添加或修改）   --%>

        <!-- Modal -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加学生</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" action="/student/add" method="post" name="studForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="sname" placeholder="输入学生姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别：</label>
                                <div class="col-sm-10">
                                    <div class="radio" style="text-align: left;">
                                        <label>
                                            <input type="radio" name="sex" id="sex1" value="男" checked>男
                                        </label>
                                        <label>
                                            <input type="radio" name="sex" id="sex2" value="女">女
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">年龄：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="age" placeholder="输入学生年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">住址：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addr" placeholder="输入学生住址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">班级：</label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="cid">
                                       <option th:value="${c.cid}" th:each="c : ${classes}">[[${c.cname}]]</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    function showEditStudentUI(){
        //1. 显示对话框
        $('#myModal').modal('show')
    }
    function saveStudent(){
        document.studForm.submit();
    }
</script>